<template>
  <div style="height: 100%">
    <el-form ref="queryForm" :model="queryParams" size="mini" inline :class="{ disabled: disableAction }" @submit.native.prevent>
      <el-form-item prop="problemType" key="problemType" v-if="isDelivery">
        <el-select v-model="queryParams.problemType" placeholder="请选择检查阶段" clearable style="width: 150px">
          <el-option v-for="item in problemTypeList" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item prop="chkitemCode">
        <el-select v-model="queryParams.chkitemCode" placeholder="请选择检查项" :loading="firChkLoading" clearable style="width: 150px">
          <el-option v-for="item in firChkList" :key="item.chkitemCode" :label="item.chkitemName" :value="item.chkitemCode" />
        </el-select>
      </el-form-item>
      <el-form-item prop="content">
        <el-input v-model.trim="queryParams.content" placeholder="请输入标准内容" clearable @keyup.enter.native="handleQuery" style="width: 150px" />
      </el-form-item>
      <el-form-item>
        <el-button size="mini" type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <div class="problem-list" v-loading="listLoading" element-loading-background="rgba(255, 255, 255, 0.5)">
      <el-empty style="width: 100%" v-if="!list.length" />
      <el-card class="item" body-style="padding-bottom: 0" v-for="item in list" :key="item.evalProblemId">
        <div slot="header" class="flex-sb flex-y-center">
          <div class="ellipsis">
            <dict-tag :options="dict.type.cq_eval_problem_type" :value="item.problemType" v-if="isDelivery && item.problemType" style="display: inline-block; margin-right: 10px; zoom: 0.9" />
            <el-tag size="small" type="primary" v-if="item.chkitemCode" style="margin-right: 10px; zoom: 0.9">{{ chkCode2name[item.chkitemCode] }}</el-tag>
            <dict-tag :options="evalRectifyResultList" :value="item.rectifyResult" style="display: inline-block; margin-right: 10px; zoom: 0.9" />
          </div>
          <div style="white-space: nowrap">
            <el-button size="mini" type="danger" icon="el-icon-delete" circle :loading="item.removeLoading" @click="handleDelete(item)" style="padding: 4px" />
            <el-button size="mini" type="primary" icon="el-icon-tickets" circle @click="openInfo(item)" style="padding: 4px" />
          </div>
        </div>
        <el-descriptions size="small" :column="2" :label-style="{ whiteSpace: 'nowrap' }">
          <el-descriptions-item label="验收标准" :span="2">{{ item.content }}</el-descriptions-item>
          <el-descriptions-item label="问题房间" :span="2" v-if="isDelivery">{{ item.positionName }}</el-descriptions-item>
          <el-descriptions-item label="问题部位" v-if="isDelivery">{{ item.spaceName }}</el-descriptions-item>
          <el-descriptions-item label="违反数" :span="isDelivery ? 1 : 2">{{ item.violateNum }} 处</el-descriptions-item>
          <el-descriptions-item label="问题描述" :span="2">{{ item.description || '暂无描述' }}</el-descriptions-item>
          <el-descriptions-item label="问题附件" :span="2">
            <MediaList :list="item.picList" style="zoom: 0.8" />
          </el-descriptions-item>
        </el-descriptions>
      </el-card>
    </div>

    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />

    <ItemInfo ref="ItemInfo" />
  </div>
</template>
<script>
// 检查问题列表
import { EVAL_CHKITEM_CODE as CHK_CODE, evalRectifyResultList } from '@/utils/baseData'
import { getFileURL } from '@/api/common'
import { listNextLevel, getProblem, delProblem } from '@/api/checkScore/cqEval'
import MediaList from '@/views/patrol/components/MediaList'
import ItemInfo from './EvalProblemInfo'
// 检查阶段。仅交付时展示，其他为默认值 NORMAL
const problemTypeList = [
  { label: '初验', value: 'FIRSTCHECK' },
  { label: '终验', value: 'FINALCHECK' }
]
export default {
  name: 'EvalProblemList',
  components: { MediaList, ItemInfo },
  dicts: ['cq_eval_problem_type'],
  data() {
    return {
      evalRectifyResultList,
      problemTypeList,
      listLoading: false,
      total: 0,
      list: [],
      prjchkId: '',
      chkitemType: '',
      versionCode:'',
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        problemType: '',
        chkitemCode: '',
        versionCode: '',
        content: ''
      },
      firChkList: [], // 一级检查项
      firChkLoading: false
    }
  },
  computed: {
    disableAction() {
      return this.listLoading
    },
    isDelivery() {
      // 是否为交付
      return this.chkitemType === CHK_CODE.DELIVERY
    },
    chkCode2name() {
      return this.firChkList.reduce((o, i) => !void (o[i.chkitemCode] = i.chkitemName) && o, {})
    }
  },
  methods: {
    init({ prjchkId, chkitemType,versionCode }) {
      this.prjchkId = prjchkId
      this.chkitemType = chkitemType
      this.versionCode = versionCode
      this.getFirChkList()
      this.resetQuery()
    },
    reset() {
      this.prjchkId = ''
      this.chkitemType = ''
      this.versionCode =''
      this.total = 0
      this.list = []
      this.firChkList = []
      this.resetForm('queryForm')
    },
    async getFirChkList() {
      this.firChkLoading = true
      const res = await listNextLevel({ chkitemCode: this.chkitemType,versionCode:this.versionCode }).catch(() => false)
      this.firChkLoading = false
      if (res === false) return (this.firChkList = [])
      this.firChkList = res.data || []
    },
    async getList() {
      const opt = {
        ...this.queryParams,
        prjchkId: this.prjchkId
      }
      this.listLoading = true
      const res = await getProblem(opt).catch(() => false)
      this.listLoading = false
      if (res === false) return

      const data = res.rows || []
      data.map(i => {
        i.removeLoading = false
        i.picList = i.picList || []
        i.picList.map(r => (r.url = getFileURL(r.fileId)))
      })
      this.list = data
      this.total = res.total || 0
    },
    handleQuery() {
      this.queryParams.pageNum = 1
      this.getList()
    },
    resetQuery() {
      this.resetForm('queryForm')
      this.handleQuery()
    },
    async handleDelete(item) {
      if (item.removeLoading) return
      const res1 = await this.$confirm(`确认删除：${item.content}？`, '警告', { type: 'warning' }).catch(() => false)
      if (res1 !== 'confirm') return

      item.removeLoading = true
      const res = await delProblem(item.evalProblemId).catch(() => false)
      item.removeLoading = false
      if (res === false) return

      this.msgSuccess('删除成功')
      this.list.length > 1 ? this.getList() : this.handleQuery()
    },
    openInfo(item) {
      this.$refs.ItemInfo.open({
        chkitemType: this.chkitemType,
        versionCode: this.versionCode,
        scoreItemId: item.evalProblemId,
        firChkList: this.firChkList
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.ellipsis {
  cursor: unset;
}
.problem-list {
  max-height: calc(100% - 100px);
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  padding: 10px 15px 15px 0;
  overflow-y: auto;
  .item {
    width: calc((100% - 20px) / 2);
    @media (min-width: 1200px) {
      width: calc((100% - 40px) / 3);
    }
    @media (min-width: 1600px) {
      width: calc((100% - 60px) / 4);
    }
  }
}
</style>
